<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>流量统计-访客分析</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${request.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
		<link rel="stylesheet" href="${request.contextPath}/assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="${request.contextPath}/assets/css/jquery.gritter.min.css" />
		<link rel="stylesheet" href="${request.contextPath}/assets/fonts/fonts.googleapis.com.css" />
		<link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrapValidator.min.css" />
		<link rel="stylesheet" href="${request.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<link rel="stylesheet" href="${request.contextPath}/stylesheets/daterangepicker.css">
		<script src="${request.contextPath}/assets/js/ace-extra.min.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
		<link rel="stylesheet" href="${request.contextPath}/stylesheets/loading.css" />
		<link rel="stylesheet" href="${request.contextPath}/stylesheets/tips.css"/>
	<style>
	th,td{text-align: center;}
	</style>
	</head>
	<body class="no-skin" style="background-color: #FFF;">
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-header widget-header-small">
							<h5 class="widget-title lighter">筛选条件</h5>
						</div>
						<div class="widget-body" style="background-color: #EFF3F8;">
							<div class="widget-main">
								<form class="form-inline" id="searchForm" method="post" action="">
									<div class="row widget-main">
										<div class="form-group">
											<label class="control-label no-padding-right">选择时段</label>
											<input type="text" id="config-demo" name="chooseTimeVO" class="form-control time" value="">
											<button id="app_search" type="button"  onclick="replaceDate(this,'1');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												昨日
											</button>
											<button id="app_search" type="button"  onclick="replaceDate(this,'7');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去7天
											</button>
											<button id="app_search" type="button"  onclick="replaceDate(this,'31');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去31天
											</button>
										</div>
										<div class="form-group">
											<button id="search_visitor" type="button" class="btn btn-pink btn-sm">
												<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
												Search
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xs-12">
					<div class="tabbable">
						<ul class="nav nav-tabs tab-color-blue background-blue" id="myTab" style="padding-left: 3px;padding-bottom: 10px;">
							<li class="active">
								<a data-toggle="tab"  aria-expanded="false"  style="height:68px;width:180px;font-size:14px;text-align:center;" onclick="showDetail('new_visitor')">
									<h5>新访客用户</h5><span class="newVisitor" style="text-align: center;"></span>
								</a>
							</li>
							<li class="">
								<a data-toggle="tab"  aria-expanded="true"  style="height:68px;width:180px;font-size:14px;text-align:center;" onclick="showDetail('new_register')">
									<h5>新注册用户</h5><span class="newRegister" style="text-align: center;"></span>
								</a>
							 </li>
						</ul>
						<input type="hidden" id="user_type" value="new_visitor"/>
						
						<div class="row" style="padding-top: 5px;">
							<!-- 柱状图 -->
							<div class="col-sm-6">
								<div class="widget-box">
									<div class="widget-header widget-header-flat">
										<h4 class="widget-title lighter">
											<i class="ace-icon fa fa-star orange"></i><span class="title_line"></span>
											<label class="help_img">
												<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
												<span class='tips'>某一时间段内各平台<span class="content_name"></span>总合<s></s></span>
											</label>
											<small class="pink">单击节点, 发现更多</small>
										</h4>
									</div>
									<div class="widget-body">
										<div id="visitorBarChart" style="height: 400px;"></div>
									</div>
								</div>
							</div>
							<!-- 折线图 -->
							<div class="col-sm-6"   style="padding-left: 0px!important;">
								<div class="widget-box">
									<div class="widget-header widget-header-flat">
										<h4 class="widget-title lighter">
											<i class="ace-icon fa fa-signal blue"></i><span class="title_bar"></span>
										</h4>
										<label class="help_img">
											<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
											<span class='tips'>某一时间段内各平台逐日<span class="content_name"></span>量<s></s></span>
										</label>
									</div>
									<div class="widget-body">
										<div id="visitorLineChart" style="height: 400px;"></div>
									</div>
								</div>
							</div>
						</div>
						
						<!-- ios/android -->
						<div class="row">
							<div class="col-xs-6" id="appDetail">
								<div class="widget-box transparent">
									<div class="widget-body">
										<div class="widget-main no-padding">
											<div class="widget-header widget-header-flat">
												<h4 class="widget-title lighter">
													<i class="ace-icon fa fa-star orange"></i><span class="platformName"></span><!-- &nbsp;&nbsp;&nbsp;(<b class="numByPlatform"></b> ) --> 
													<label style="margin-left: 20px;" class="dateSection"></label>
												</h4>
												<label class="help_img">
													<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
													<span class='tips'>某一时间段内<span class="plat_name"></span><span class="content_name"></span>量<s></s></span>
												</label>
											</div>
											<div class="widget-body">
												<div id="platformBarChart" style="height: 440px;"></div>
											</div>
										</div>
								   </div>
								</div>
						  </div>
					  </div>
						<!-- wap/pc -->
						<div class="tab-content" id="wapApcDetail" >
							<div class="tab-pane active in">
								<div class="row">
									<div class="col-xs-12">
										<div class="row">
											<div class="col-sm-6">
											  <div class="widget-box transparent">
												<div class="widget-header widget-header-flat">
													<h4 class="widget-title lighter">
														<i class="ace-icon fa fa-star orange"></i><span class="platformName"></span><!-- &nbsp;&nbsp;&nbsp;(<b class="numByPlatform"></b>)   -->
														<label style="margin-left: 20px;" class="dateSection"></label>
													</h4>
													<label class="help_img">
														<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
														<span class='tips'>某一时间段内wap各渠道<span class="content_name"></span>量（点击tab的行获取近一步数据，默认展示SEO的数据）<s></s></span>
													</label>
												</div>
												<div class="dataTables_wrapper form-inline no-footer">
													<table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="dynamic-table_info">
														<thead>
														<tr>
															<th>序号</th>
															<th>时间</th>
															<th>渠道</th>
															<th class="th_name"></th>
														</tr>
														</thead>
														<tbody id="channelData"></tbody>
													</table>
												</div>
												</div>
											</div>
											
											<div class="col-xs-6" id="channelDetailChart"  style="padding-left: 0px!important;">
												<div class="widget-box transparent">
													<div class="widget-body">
														<div class="widget-main no-padding">
															<div class="widget-header widget-header-flat">
																<h4 class="widget-title lighter">
																	<i class="ace-icon fa fa-star orange"></i><span class="channelName"></span><!-- &nbsp;&nbsp;&nbsp;(<b class="numByChannel"></b> ) --> 
																	<label style="margin-left: 20px;" class="dateSection"></label>
																</h4>
																<label class="help_img">
																	<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
																	<span class='tips'>一段时间内WAP某一一级渠道下各二级渠道<span class="content_name"></span><s></s></span>
																</label>
															</div>
															<div class="widget-body">
																<div id="channelBarChart" style="height: 300px;"></div>
															</div>
														</div>
												   </div>
												</div>
										  </div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script src="${request.contextPath}/assets/js/moment.min.js"></script>
		<script src="${request.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/bootstrap.min.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/moment.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/daterangepicker.js"></script>
		<script src="${request.contextPath}/assets/js/chosen.jquery.js"></script>
		<script src="${request.contextPath}/assets/js/user/base.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/dateRange.js"></script>
		<script src="${request.contextPath}/assets/js/d3.v3.min.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/loading.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/g2.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/slider.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/g2-modal.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/FileSaver.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/export-csv.js"></script>
		<script type="text/javascript">
		d3.select(self.frameElement).style("height", "1200px");
		jQuery(function($) {
			$("#search_visitor").click();
		});
		
		function showDetail(user_type){
			$("#user_type").val(user_type);
			$("#search_visitor").click();
		}
		
		$("#search_visitor").on("click",function(){
			var user_type = $("#user_type").val();
		    getChartData(user_type);
		});

		function getChartData(type){
			var chooseTime = $("#config-demo").val();
			$.ajax({
				url : '${request.contextPath}/visitors/visitorChartData',
				type : "POST",
				data : {
					chooseTime:chooseTime,
					type:type
				},
			    beforeSend: function(){
	 			   $("#search_visitor").attr("disabled",true);
	 			    openPartialLayer($("#visitorLineChart"));
	 			    openPartialLayer($("#visitorBarChart"));
		    	 },
			    complete: function(){
			    	$("#search_visitor").attr("disabled",false);
			    	removeLoading($("#visitorLineChart"));
			    	removeLoading($("#visitorBarChart"));
			    },
				success:function(data) {
					if(type == "new_visitor"){
						$(".title_line").html("新访客平台趋势图");
						$(".title_bar").html("新访客各平台统计图");
						$(".content_name").html("新访客");
						$(".th_name").html("新访客量");
						$(".newVisitor").html(data.data.amount);
					}else{
						$(".title_line").html("新注册用户平台趋势图");
						$(".title_bar").html("新注册用户各平台统计图");
						$(".content_name").html("新注册用户");
						$(".th_name").html("新注册用户量");
						$(".newRegister").html(data.data.amount);
					}
					var defs = {
						'platform': {
							alias : '设备平台'
						},
						'amount': {
							alias :'浏览量(/次)'
						},
						'time':{
							type: 'time',
							tickCount: 8
						}
					};
					var chart = histogramModal(data.data.jsonData,'visitorBarChart','platform','amount','设备平台','浏览量(/次)',400,defs);
					lineChartModal(data.data.jsonData2,'visitorLineChart','time','amount','platform','','浏览量(/次)',400,defs);
					if(data.data.jsonData != ""){
						//柱状图点击事件
						getDataByPlatform(chart.getAllGeoms()[0].getData()[0]._origin.platform,chart.getAllGeoms()[0].getData()[0]._origin.amount);
						chart.on('plotclick', function (ev) {
							var data = ev.data;
							if (data) {
								var name = data._origin['platform'];
								var amount = data._origin['amount'];
								getDataByPlatform(name,amount);
							}
						});
						$("#visitorBarChart").css("cursor","pointer");
					}else{
						$("#wapApcDetail").hide();
						$("#appDetail").hide();
					}

				},
				error:function(data) {
					//showMsg("查询数据有误");
				}
			});
		}
		
		function getDataByPlatform(name,value){
			var chooseTime = $("#config-demo").val();
			var user_type = $("#user_type").val();
			$(".dateSection").html(chooseTime);
			$(".platformName").html(name);
			$.ajax({
				url : '${request.contextPath}/visitors/visitorPlatformData',
				type : "POST",
				data : {
					chooseTime:chooseTime,
					type:user_type,
					platform:name
				},
				success:function(data) {
					if(name == 'wap' || name =='pc'){
						$("#wapApcDetail").show();
						$("#appDetail").hide();
						var html = "";
						for (i = 0; i < data.data.firstChannelArr.length; i++) {
							var index = i + 1;
							html += "<tr>"
									+"<td>" + index + "</td>" 
									+"<td>" + chooseTime + "</td>"
									+"<td class='parentChannel'>" + data.data.firstChannelArr[i] + "</td>"
									+"<td>" + data.data.firstAmountArr[i] + "</td></tr>";
						}
						$("#channelData").html(html);
						$("#channelData").css("cursor","pointer");
						$("#channelData tr").on("click",function(){
							var channel = $(this).children(".parentChannel").html();
							$("#channelData tr").css("background-color","");
							$(this).css("background-color","#d9edf6");
							if(channel == "SEM"){
								getChannelData(data.data.SEMChennelMap,channel);
							}else if(channel == "SEO"){
								getChannelData(data.data.SEOChennelMap,channel);
							}else if(channel == "分享"){
								getChannelData(data.data.shareChennelMap,channel);
							}else{
								$("#channelDetailChart").hide();
							}
						});
						$("#channelData tr").eq(1).click();
					}else{
						$(".plat_name").html(name);
						$("#wapApcDetail").hide();
						$("#appDetail").show();
						var	exportForm={
								'headers':['平台','浏览量'],
								'cols':['name',	'value']
						};
						horizontalHistogramModal(data.data.jsonArr,'platformBarChart','name','value',440,"",exportForm);
					}
				},
				error:function(data) {
					//showMsg("查询数据有误");
				}
			});
		}
		
		function getChannelData(channelJson,channelName){
			$("#channelDetailChart").show();
			$.ajax({
				url : '${request.contextPath}/visitors/visitorChannelData',
				type : "POST",
				data : {
					channelJson:channelJson
				},
				beforeSend: function(){
	 			    openPartialLayer($("#channelBarChart"));
		    	 },
			    complete: function(){
			    	removeLoading($("#channelBarChart"));
			    },
				success:function(data) {
					$(".channelName").html(channelName);
					var	exportForm={
								'headers':['平台','浏览量'],
								'cols':['name',	'value']
						};
					horizontalHistogramModal(data.data.jsonArr,'channelBarChart','name','value',300,"",exportForm);
				},
				error:function(data) {
					//showMsg("查询数据有误");
				}
			});
		}
	</script>
	</body>
</html>